<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('主题修改')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: summernote-css"/>
</head>
<body>
<div class="container">
    <th:block th:include="include :: navigate('主题修改','关 闭','listSubject')"/>

    <div>
        <form id="subjectForm" th:object="${subject}">
            <div class="form-group">
                <label for="title" class="control-label is-required">标题名：<input th:field="*{id}" id="id" name="id" type="hidden"></label>
                <input type="text" class="form-control" th:field="*{title}" id="title" name="title" maxlength="50"
                       required
                       placeholder="请输入标题名">
            </div>
            <div class="form-group">
                <label for="subheading" class="control-label is-required">副标题：</label>
                <input type="text" class="form-control" th:field="*{subheading}" id="subheading" name="subheading"
                       maxlength="50"
                       placeholder="请输入副标题">
            </div>
            <div class="form-group">
                <label for="resourcePath" class="control-label is-required">资源上传：</label>
                <input type="hidden" th:field="*{resourcePath}" id="resourcePath" name="resourcePath">
                <input id="file" name="file" type="file" class="file-upload">
            </div>

            <div class="form-group">
                <label for="content">内容：</label>
                <textarea class="form-control" th:field="*{content}" id="content" name="content"
                          placeholder="请输入内容"></textarea>
            </div>

            <div class="row">
                <div class="col-sm-offset-5 col-sm-10">
                    <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-check"></i>保 存
                    </button>&nbsp;
                </div>
            </div>
        </form>

    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: summernote-js"/>
<script>
    var modifySubject = "/backend/subject/modifySubject"

    $(function () {
        $("#content").summernote({
            height: 300,
            lang: 'zh-CN',
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
                ['fontname', ['fontname']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ol', 'ul', 'paragraph', 'height']],
                ['table', ['table']],
                ['insert', ['link']],
                ['view', ['undo', 'redo', 'fullscreen', 'codeview', 'help']]
            ]
        })

        $(".file-upload").each(function (i) {
            var val = $("input[name='resourcePath']").val()

            var initialPreview = (val !== '') ? [val] : [];
            $(this).fileinput({
                uploadUrl: '/backend/resource/upload',
                initialPreviewAsData: true,
                initialPreview: initialPreview,
                //增加tonken
                ajaxSettings: {
                    headers: {
                        "token": window.token
                    }
                },
                maxFileCount: 1,
                autoReplace: true
            }).on('fileuploaded', function (event, data) {
                $("#resourcePath").val(data.response.msg)
            }).on('fileremoved', function () {
                $("#resourcePath").val("")
                $(this).fileinput("clear"); // 清除预览区域的内容
            })
            $(this).fileinput('_initFileActions');
        });

        var icon = "<i class='fa fa-times-circle'></i>";
        $("#subjectForm").validate({
            rules: {
                title: {
                    required: true,
                    minlength: 2,
                    maxlength: 50
                },
                subheading: {
                    required: true,
                    minlength: 2,
                    maxlength: 50
                }
            },
            messages: {
                title: {
                    required: icon + "请输入标题",
                    minlength: icon + "标题不能小于2个字符",
                    maxlength: icon + "标题不能大于50个字符"
                },
                subheading: {
                    required: icon + "请输入副标题",
                    minlength: icon + "副标题不能小于2个字符",
                    maxlength: icon + "副标题不能大于50个字符"
                }
            },
            submitHandler: function (form) {
                var data = serializeObject($("#subjectForm"))
                putAjax(modifySubject,JSON.stringify(data),function (response) {
                    if (response.code == 0){
                        cocoMessage.success(response.msg+"，3s后返回列表页面！")
                        //三秒后执行
                        setTimeout(function () {
                            $("#listSubject").click()
                        },3000)
                    }
                })
                return false
            }
        })
    })


</script>
</body>
</html>
